<template>
	<div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn">
				<!--<span class="aui-iconfont aui-icon-left"></span>-->
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">邀请入驻</div>
		</header>
		<div class="inviteback">
			<!--<img src="../assets/zhucebg.png" class="invitecon">-->
	
			<div class="song">
				<img src="../assets/logojd.png" class="s_img">
				<h5>京东购物省钱 不花冤枉钱</h5>
				<p>{{name}}送你 {{money}} 元奖励</p>
				<p>邀请您成为TA的友惠家VI</p>
				<div class="qian">
					<span>￥</span>
					<span>{{money}}</span>
				</div>
			</div>
			
			<div class="invitemain">
				<div class="paddinvite">
					<div class="sameline"><input type="text" class="sameinput" placeholder="请输入手机号" maxlength="11" ref="phone"></div>
					<div class="sameline" style="border: 0rem;">
						<input type="text" class="verfinput" placeholder="请输入验证码" maxlength="6" ref="codeval">
						<div v-show="show" class="verfibut" @click="getCode">验证码</div>
						<div v-show="!show" class="verfibut">{{count}} s</div>
					</div>
					<!--					<div class="sameline"><input type="text" class="sameinput" placeholder="邀请码(选填)"></div>
-->
					<div class="drawbut" @click="drawbut()">领取奖励</div>
				</div>
			</div>
		</div>
		<div class="maskcon" v-show="isShow" @click="mackBut">
			<div class="maskmain" v-show="newpersonal">
				<div class="maskfont">
					<h4>已领取</h4>
					<span class="maskspan" v-model="maskFont">您已经成功领取入驻奖励币</span>
				</div>
				<div class="maskbut" @click="imUse">立即使用</div>
			</div>
			<div class="maskmain" v-show="register">
				<div class="maskfont" style="height: 2.5rem;">

					<span class="maskspan" v-model="maskFont">{{maskFont}}</span>
				</div>
				<div class="maskbut" @click="openBut">打开友惠家App</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				show: true,
				isShow: false,
				newpersonal: false,
				register: false,
				count: '',
				timer: null,
				listjson: [],
				drawlist: [],
				newUrl:'',
				maskFont:'',
				name:'',
				money:''
			}
		},
		created() {
			var href = window.location.href;
//			console.log(href)
			var jie = this.$route.query.name
			this.name = unescape(jie)
			this.money = this.$route.query.money
		},
		methods: {
			getCode() {
//				var reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				const TIME_COUNT = 60;
				var phone = this.$refs.phone.value;
				if(!this.timer && phone.length == 11) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}else {
					Toast({
						message: "请输入正确手机号码",
						position: 'middle',
						duration: 3000
					});
					return;
				}
				var phone = this.$refs.phone.value;
				var url = BaseUrl + 'login/code?phone=' + phone;
				this.$http.get(url).then(res => {
                    if(res.data.code == "10000"){
                    	this.listjson = res;
                    }else{
                    	Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
						});
                    }
					

				})

			},
			drawbut: function() {
				var href = window.location.href;
//				console.log(href.substring(href.indexOf('parentId='),href.length));
//				var parentId = href.substring(href.indexOf('parentId='),href.length);
				var parentId = this.$route.query.parentId
				
//				console.log(parentId)
				var phone = this.$refs.phone.value;
				var code = this.$refs.codeval.value;
//				var reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
//				console.log(code.length)
				if(phone.length == 11 && code.length != 0) {
					var url = BaseUrl + 'users/invite/regVip?phone=' + phone + '&code=' + code + '&appId=gzh&' + 'parentId='+parentId;
//					console.log(url)
					this.$http.get(url).then(res => {

						this.drawlist = res;
						if(res.data.code == "10000") {
							this.maskFont = res.data.msg;
							this.newUrl = res.data.data;
							this.isShow = true;
							this.newpersonal = true;
						} else {
							this.maskFont = res.data.msg;
							this.isShow = true;
							this.register = true;
							this.newUrl = res.data.data;
						}

					})
				} else {
					Toast({
						message: "请输入正确手机号码、手机验证码",
						position: 'middle',
						duration: 3000
					});
					return;
				}
			},
			imUse:function(){
				window.location.href = this.newUrl
			},
			openBut:function(){
				window.location.href = this.newUrl
			},
			mackBut:function(){
				this.isShow = false;
				this.register = false;
				this.newpersonal = false;
			}
			
	
},
	}
</script>

<style scoped="scoped">
	.inviteback {
		width: 100%;
		height: 100%;
		margin-top: 1rem;
		/*background-image: url(../assets/downloadback.png);*/
	}
	
	.invitecon {
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.invitemain {
		position: absolute;
		width: 94.1%;
		height: 47.2%;
		background-color: #fff;
		bottom: 0.1rem;
		margin: 0 auto;
		left: 50%;
		transform: translate(-50%, 0%);
		border-radius: 0.12rem;
		box-shadow: 0rem 0rem 0.5rem 0.46rem rgba(0, 0, 0, 0.04);
	}
	
	.paddinvite {
		padding: 0.53rem;
		margin-top: 0.35rem;
	}
	
	.sameline {
		width: 100%;
		border-bottom: solid 1px #dbdbdb;
		height: 0.85rem;
	}
	
	.drawbut {
		width: 100%;
		height: 0.96rem;
		border-radius: 0.08rem;
		background-color: #aa162b;
		margin-top: 0.7rem;
		line-height: 0.9rem;
		color: #FFFFFF;
		font-size: 0.32rem;
		text-align: center;
	}
	
	.sameinput {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		outline: none;
	}
	
	.verfinput {
		width: 60%;
		height: 0.8rem;
		line-height: 0.8rem;
		outline: none;
		border-bottom: solid 0.01rem #dbdbdb;
	}
	
	.verfibut {
		width: 2.07rem;
		height: 0.69rem;
		background-color: #f6f6f6;
		border-radius: 0.08rem;
		float: right;
		margin-top: 0.1rem;
		line-height: 0.69rem;
		text-align: center;
		color: #4A4A4A;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular;
	}
	/****蒙版内容*****/
	
	.maskcon {
		position: fixed;
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		top: 0px;
		left: 0rem;
	}
	
	.maskmain {
		width: 80%;
		height: 3.85rem;
		background-color: #FFFFFF;
		border-radius: 0.22rem;
		margin: 0 auto;
		margin-top: 60%;
	}
	
	.maskfont {
		padding: 0.62rem;
	}
	
	.maskfont>h4 {
		font-size: 0.3rem;
		text-align: center;
	}
	
	.maskspan {
		margin-top: 0.3rem;
		text-align: center;
		display: block;
		color: #999;
		font-size: 0.3rem;
	}
	
	.maskbut {
		width: 100%;
		height: 1rem;
		background-color: #FF2040;
		color: #FFFFFF;
		text-align: center;
		line-height: 1rem;
		margin-bottom: 0;
		margin-top: 0.5rem;
		border-bottom-left-radius: 0.22rem;
		border-bottom-right-radius: 0.22rem;
		font-size: 0.32rem;
	}
	.song{
		width: 100%;
		padding-top: 0.9rem;
		padding-bottom: 6.65rem;
		background: #AB162B;
		text-align: center;
	}
	.s_img{
		width: 0.7rem;
		height: 0.86rem;
		/*margin-bottom: 0.26rem;*/
		/*display: block;*/
	}
	h5{
		font-size: 0.54rem;
		color: #FFFFFF;
		font-weight: bold;
	}
	.song p{
		font-size: 0.23rem;
		margin: 0.08rem 0;
		color:rgba(255,255,255,0.7);
	}
	.qian span:nth-child(1){
		font-size: 0.44rem;
		color: #FFFFFF;
		position: relative;
		top: -0.65rem;
		left: 0;
	}
	.qian span:nth-child(2){
		font-size: 1.44rem;
		color: #FFFFFF;
	}
</style>